<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>系统功能选择器-单选</title>
<link rel="stylesheet" href="../common.css">
<link href="../weblib/fancytree/ui.fancytree.css" rel="stylesheet">

<style type="text/css">
.selected-list {
	min-height: 2em;
	padding: 0;
	margin: 0;
}

.selected-list  li {
	position: relative;
	border: 1px solid #999;
	display: inline-block;
	margin-right: 1em;
	padding: 0px 10px;
	cursor: pointer;
	border-radius: 5px;
	background: hsl(103, 30%, 50%);
	color: #fff;
}

.selected-list  li:hover {
	background: hsl(103, 30%, 30%);
}
</style>
</head>
<body class="layout-vbox">
	<header class="layout-justify">
		<aside>
			<h5>父功能选择器</h5>
		</aside>
		<aside>
			<button id="confirmPickBtn">确定选择</button>
		</aside>
	</header>
	<main class="layout-vbox">
	<section class="padv">
		<fieldset class="pad">
			<legend>
				已选择 <small>(点击项目可以取消)</small>
			</legend>
			<ul class="selected-list" id="currentSelectedList">
			</ul>
		</fieldset>
	</section>
	<article class="table">
		<header>
			<table>
				<colgroup>
					<col width="30px">
					<col width="200px">
					<col width="150px">
					<col width="80px">
					<col width="auto">
				</colgroup>
				<thead>
					<tr>
						<th>@</th>
						<th>名称</th>
						<th>代号</th>
						<th>类型</th>
						<th>url</th>
					</tr>
				</thead>
			</table>
		</header>
		<main style="overflow:auto;">
		<table id="functionalityTableTree">
			<tbody>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>
		</main>
		<footer> </footer>
	</article>
	</main>
	<script src="/common.js"></script>
	<script src="/weblib/fancytree/jquery.fancytree.js"></script>
	<script src="controller.js"></script>
</body>
</html>